<!--
 * @Description:
 * @Author bianpengfei
 * @create 2022/11/7 10:37
 -->
<template>
  <div class="page">
    <div class="page-body">
      <div class="page-body__inner">
        <div class="page-body__title">门户网站</div>
        <div class="page-body__form">
          <div class="page-body__logo">
            <img src="@/libs/assets/images/logo-white.png" class="w-40px h-40px" />
            <span class="ml-14px">统一门户网站</span>
          </div>
          <div class="page-body__input">
            <el-form ref="form" :model="form" size="default" @keydown.enter.native.prevent="onLogin">
              <el-form-item prop="name" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
                <el-input
                  v-model="form.name"
                  placeholder="请输入账号"
                  prefix-icon="text-18px iconfont-ps icon-portal-site-geren"
                  class="!w-340px"
                >
                </el-input>
              </el-form-item>

              <el-form-item prop="pass" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
                <el-input
                  v-model="form.pass"
                  placeholder="请输入密码"
                  type="password"
                  prefix-icon="text-20px iconfont-ps icon-portal-site-mima"
                  class="!w-340px"
                >
                </el-input>
              </el-form-item>

              <el-form-item
                prop="yzm"
                :rules="[
                  { required: true, message: '请输入验证码 ', trigger: 'blur' },
                  { validator: validateYzm, trigger: 'change' }
                ]"
              >
                <div class="!w-340px flex">
                  <el-input
                    v-model="form.yzm"
                    placeholder="请输入验证码"
                    prefix-icon="text-blue text-22px iconfont-ps icon-portal-site-shouhoufuwu-chapingfangyu"
                    class="flex-1 mr-10px"
                  >
                  </el-input>
                  <Verify
                    ref="verify"
                    :type="2"
                    class="h-40px"
                    :figure="10"
                    font-size="14px"
                    :show-button="false"
                  ></Verify>
                </div>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" :loading="loading" class="!w-340px" @click="onLogin">登陆</el-button>
              </el-form-item>
              <el-form-item>
                <div class="flex justify-end">
                  <span class="text-12px text-[#8c8c8c] cursor-pointer" @click="onSignup">注册账号</span>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Verify from 'vue2-verify'
import { to } from '@bianpengfei/utils'

export default {
  components: { Verify },
  data() {
    const validateYzm = (rule, value, callback) => {
      const codeChose = this.$refs.verify.instance.codeChose
      if (value != codeChose) {
        return callback(new Error('请输入正确的验证码'))
      }
      return callback()
    }
    return {
      form: {
        name: '',
        pass: '',
        yzm: '' // 验证码
      },
      loading: false,
      validateYzm
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {
    this.$once('hook:beforeDestroy', () => {
      // this.removeEvents()
    })
  },

  methods: {
    async onLogin() {
      const [valid, err] = await to(this.$refs.form.validate())
      if (valid) {
        const codeChose = this.$refs.verify.instance.codeChose
        if (this.form.yzm != codeChose) {
          this.$message.error('请输入正确的验证码')
          this.$refs.verify.instance.refresh()
        }
        this.loading = true
        const sendData = {
          userNo: this.form.name,
          password: this.form.pass
          // yzm: this.form.yzm // 验证码
        }
        this.loading = false
        this.loading = true
        const [res, err] = await to(this.$api.default.login({ data: sendData }))
        if (err) {
          this.loading = false
          return
        }
        if (res) {
          const { redirect } = this.$route.query
          console.log(res)
          this.loading = false
          this.$router.replace(redirect || '/backsys/home/index')
        }
      }

      console.log('this.$refs.instance', this.$refs.instance)

      console.log('verify', this.$refs.verify)
    },

    onSignup() {
      this.$router.push('/backsys/register')
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  .page-body {
    display: flex;
    width: 100%;
    height: 100%;
    @include flex-center();
    background-image: url('~@/libs/assets/bg/u0.png');
    .page-body__inner {
      height: 411px;
      width: 1175px;
      @include flex-center();
      position: relative;
      justify-content: flex-end;
      padding: 0 90px 0 0;
      background-image: url('~@/libs/assets/bg/u1.png');
      .page-body__title {
        font-size: 24px;
        color: #fff;
        position: absolute;
        left: 0;
        top: -4px;
        transform: translateY(-100%);
      }
      .page-body__form {
        width: 440px;
        height: 456px;
        border-radius: 5px;
        background-color: #fff;
        padding: 60px 0 90px 0;
        .page-body__logo {
          height: 45px;
          color: #000;
          font-size: 16px;
          @include flex-center();
        }
        .page-body__input {
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          padding: 20px 0 0 0;
          ::v-deep .cerify-code-panel {
            overflow: hidden;
            width: fit-content !important;
            .verify-code {
              border-radius: 4px;
              height: 40px !important;
              line-height: 40px !important;
              width: 100px !important;
              position: absolute;
            }
            .verify-code-area {
              width: 100px !important;
              .verify-change-area {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>
